<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
		<title>AngularJS-test</title>
		<style type="text/css">
			/*混合选择器,标签选择器与伪类选择器一起使用的优先级大于类选择器*/
			p:first-of-type{
				background-color: red;
			}
			.p1{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 
		  1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。
		  2.ng-app作用：告诉子元素指令是属于angularJs。
		  3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块 
		-->
		<div ng-app="myApp" ng-controller="myCtrl" ng-init="quantity=1;cost=5">
			名: <input type="text" ng-model="firstName"><br>
			姓: <input type="text" ng-model="lastName"><br>
			<br>
			姓名: {{firstName + " " + lastName}}	
			<p>总价： {{ quantity * cost }}</p>
			<ul>
			    <li ng-repeat="x in names">{{x}}</li>
			</ul>
		</div>
		<div class="test">
			<p class="p1">1</p>
			<p>2</p>
			<p>3</p>
		</div>	 
		<script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope){
			    $scope.firstName= "John";
			    $scope.lastName= "Doe";
			    $scope.names = ["Emil", "Tobias", "Linus"];
			});
		</script>
	</body>
</html>